<template>
  <div class="channel-page">
    <div class="menu">
      <Menu :index="2" />
    </div>
    <el-scrollbar class="colL">
      <el-form label-width="90px">
        <div class="section">
          <div class="title-bar">
            <div class="title">基础信息</div>
            <el-button
              type="primary"
              size="small"
              icon="Refresh"
              :style="{ marginLeft: 'auto' }"
              @click="handleTry"
              >试一试</el-button
            >
          </div>
          <el-form-item label="品牌名">
            <el-input v-model="form.c1" placeholder="请输入" />
          </el-form-item>
          <el-form-item label="产品名">
            <el-input v-model="form.c2" placeholder="请输入" />
          </el-form-item>
          <el-form-item label="日常价格">
            <el-input v-model="form.c3" placeholder="请输入" />
          </el-form-item>
          <el-form-item label="直播价格">
            <el-input v-model="form.c4" placeholder="请输入" />
          </el-form-item>
          <el-form-item label="赠品">
            <el-input v-model="form.c5" placeholder="请输入" />
          </el-form-item>
          <el-form-item label="促销时点">
            <el-select v-model="form.c6" placeholder="请选择">
              <el-option label="周年庆" value="周年庆"></el-option>
              <el-option label="新号开播" value="新号开播"></el-option>
              <el-option label="双11" value="双11"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="快递物流">
            <el-input v-model="form.c7" placeholder="请输入" />
          </el-form-item>
          <el-form-item label="发货时间">
            <el-input v-model="form.c8" placeholder="请输入" />
          </el-form-item>
        </div>

        <!-- 产品卖点 -->
        <div class="section">
          <div class="title-bar">
            <div class="title">产品卖点</div>
          </div>
          <el-form-item label="产品包装">
            <el-input v-model="form.c9" placeholder="请输入" />
          </el-form-item>
          <el-form-item label="产品颜值">
            <el-input v-model="form.c10" placeholder="请输入" />
          </el-form-item>
          <el-form-item label="基础口感">
            <el-input v-model="form.c11" placeholder="请输入" />
          </el-form-item>
          <el-form-item label="材料成分">
            <el-input v-model="form.c12" placeholder="请输入" />
          </el-form-item>
          <el-form-item label="其他">
            <el-input v-model="form.c13" placeholder="请输入" />
          </el-form-item>
          <el-form-item label="适合人群">
            <el-input v-model="form.c14" placeholder="请输入" />
          </el-form-item>
          <el-form-item label="功效类型">
            <el-input v-model="form.c15" placeholder="请输入" />
          </el-form-item>
        </div>

        <!-- 话术风格 -->
        <div class="section">
          <div class="title-bar">
            <div class="title">话术风格</div>
            <el-select
              placeholder="请选择"
              v-model="form.c20"
              :style="{ width: '1%', flex: '1', marginLeft: '34px' }"
            >
              <el-option label="李佳奇" value="李佳奇"></el-option>
              <el-option label="辛巴" value="辛巴"></el-option>
              <el-option label="董宇辉" value="董宇辉"></el-option>
              <el-option label="乐乐吴" value="日常店乐乐吴播"></el-option>
              <el-option label="小五" value="小五"></el-option>
              <el-option label="良品铺子" value="良品铺子"></el-option>
              <el-option label="日常店播" value="日常店播"></el-option>
            </el-select>
          </div>
        </div>

        <!-- 内容选择 -->
        <div class="section">
          <div class="title-bar">
            <div class="title">内容选择</div>
          </div>
          <el-radio-group v-model="form.c17">
            <el-row>
              <el-col :span="6">
                <el-radio label="全部">全部</el-radio>
              </el-col>
              <el-col :span="6">
                <el-radio label="开场话术">开场话术</el-radio>
              </el-col>
              <el-col :span="6">
                <el-radio label="塑品话术">塑品话术</el-radio>
              </el-col>
              <el-col :span="6">
                <el-radio label="场景话术">场景话术</el-radio>
              </el-col>
              <el-col :span="6">
                <el-radio label="互动话术">互动话术</el-radio>
              </el-col>
              <el-col :span="6">
                <el-radio label="价格话术">价格话术</el-radio>
              </el-col>
              <el-col :span="6">
                <el-radio label="上架话术">上架话术</el-radio>
              </el-col>
              <el-col :span="6">
                <el-radio label="促单话术">促单话术</el-radio>
              </el-col>
            </el-row>
          </el-radio-group>
        </div>

        <!-- 字数要求 -->
        <div class="section">
          <div class="title-bar">
            <div class="title">字数要求</div>
          </div>
          <el-row type="flex" align="middle" justify="space-between">
            <el-slider
              :min="0"
              :max="2000"
              v-model="form.c18"
              :style="{ marginLeft: '10px', width: `calc(100% - 60px)` }"
            />
            <div :style="{ textAlign: 'right' }">{{ form.c18 }}</div>
          </el-row>
        </div>

        <!-- 附加信息 -->
        <div class="section">
          <div class="title-bar">
            <div class="title">附加信息</div>
          </div>
          <el-input
            type="textarea"
            v-model="form.c19"
            :rows="4"
            placeholder="请输入你想生成的文案描述"
            maxlength="500"
            show-word-limit
          />
        </div>

        <div class="btn-panel">
          <el-button type="primary" :loading="loading" @click="handleCreate"
            >生成</el-button
          >
        </div>
      </el-form>
    </el-scrollbar>
    <el-scrollbar class="colR">
      <template v-if="isShow">
        <div :style="{ padding: '20px' }" v-if="loading">
          <el-skeleton animated />
        </div>
        <div class="conText" v-else>
          <div class="title">
            标题:茯苓八珍糕直播话术
            <el-switch
              v-model="value2"
              inactive-text="违禁词预警"
              :style="{ marginLeft: 'auto' }"
            />
          </div>
          <div class="text">
            欢迎家人们来到直播间，新号开播只赚人气不赚钱，优惠多多，福利多多，我们这个获苓八珍糕传统手工轻工工艺制作是能够保持住原有的品质口感，还有营养价值，富含丰富的一些蛋白质、膳食纤维等一些微量元素，钙铁磷钾维C都是相当丰富的。
          </div>
          <div class="text">
            那么我们在吃这个八珍糕的同时，享受美味的同时，还想给自己的身体和家里面的人身体补充上一些身体所需要的元素怎么办?
            最主要的还是没有颔外增加过任何的食品添加剂，没有香精，没有色素0添加、0污染、0蔗糖、0白糖、0枫糖，糖高的、尿高的、脂高的、乐高的都可以吃，我们平时重油重盐重糖的正在管理生长的年龄30己过的哥哥姐姐，孕妈妈哺乳期宝妈上到百岁老人，下到七八个月宝贝我们都可以放心吃,我们的八珍糕，这是一款没有添加过任何高科技的一个健康食品，天三顿都要吃的一个大米，然后增加了获大米制作，大家都知道每天-梦茨实，现在少吃荤腥少吃糖，多吃8珍糕，这个一包的话，这一小包伏天的时间，获苓荧实莲子意米这些东西我们可以多吃是12克的，一小包的净含量12克，你们拿到手15块9手钱是整整满满当当的4块9毛钱，平常你们正常价格拿到手是要50多的，其实你们也可以到-大箱50块600克的净含量别人家去看一看，对不对?
          </div>
          <div class="text">
            今天在主播的直播间15块9毛钱，你拿到的不是10块20块，是整整50块600克一斤这种福利不是天天有亏本价格也不会天天上。所以如果说宝贝你今天能够拍到，不要等到明天
            很多宝贝会有疑问，为什么我家这么便宜，是不是过期的?是不是?通通都是新鲜食材现做现发，并且都是精心挑选的食材给到大家。
          </div>
          <div class="text">
            我们是线下供应链在线下做了20多年的一个供应链，正宗的源头厂家，我们也是第一次来到料爸爸平台，今天第是第1周开播，那么这个价格给出去是有目的的，不是说白给的，我希望大家尝试过一次之后觉得好吃可以再回来回购的。
          </div>
          <div class="text">
            咱家的口感，您吃到你就会发现必定要食材好才能够做得出来，所以您可以放心去尝一尝试一试。这不好吃，你不回来回购，那么我这一单就是实打实的亏出去的。你平时可以放在包包里面带8个放办公室。出门旅个游，探个亲带小明方们当个上午茶下午茶放在句句里面遛个娃通个小宠物，随时随地随心随享受。二伏天子力气虑体内湿气重，我们八珍糕具有除湿的功效，让你无湿一身轻
          </div>
          <div class="text">
            你们拿到手宝贝可以自己猜一下来看一下，每一块都是新鲜的食材给到大家，真真实实的一个坚果做出来给大家，口感特别的松软，咬下去的第一口都是淡淡的威香口味，松松的软软的耀糯的入口即化的那种，如果说宝贝你以前在别家拍过，感觉别人家的那种以前买过那种伏等八珍糕，感觉口感比较硬的，咬不动嚼嚼不烂的。
          </div>
          <div class="text">
            平时你们正常价格拿到要50多的，所以说今天这个福利不能错过各位宝贝糖高尿高脂高都可以吃，50多包，总共重量是600克，拿到手一块就一块的净含量是12克的，两指宽一指厚的50块，总共增量是600克15块9毛钱一个，完全是快递费的价格。这是我先请您吃的，尝试过之后您觉得好请您再回来回购。
          </div>
          <el-row type="flex" justify="end" :style="{ marginTop: '30px' }">
            <el-button type="primary" size="large">保存文件</el-button>
          </el-row>
        </div>
      </template>
    </el-scrollbar>
  </div>
</template>

<script setup>
import { ref, reactive } from "vue";
import Menu from "./menu.vue";
const loading = ref(false);
const isShow = ref(false);
const value2 = ref(false);
let form = ref({
  c1: "",
  c2: "",
  c3: "",
  c4: "",
  c5: "",
  c6: "",
  c7: "",
  c8: "",
  c9: "",
  c10: "",
  c11: "",
  c12: "",
  c13: "",
  c14: "",
  c15: "",
  c16: "",
  c17: "",
  c18: 0,
  c19: "",
  c20: "",
});

function handleTry() {
  form.value = {
    c1: "茯苓八珍糕",
    c2: "茯苓八珍糕",
    c3: "50",
    c4: "15.9",
    c5: "",
    c6: "新号开播",
    c7: "顺丰",
    c8: "一周内",
    c9: "",
    c10: "",
    c11: "",
    c12: "",
    c13: "",
    c14: "",
    c15: "",
    c16: "辛巴",
    c17: "互动话术",
    c18: 1500,
    c19: "",
    c20: "日常店播",
  };
}

function handleCreate() {
  isShow.value = true;
  loading.value = true;
  setTimeout(() => {
    loading.value = false;
  }, 3000);
}
</script>

<style lang="scss" scoped>
.channel-page {
  clear: both;
  overflow: hidden;
  height: 100%;
  line-height: 1;
  display: flex;
  font-size: 14px;

  .menu {
    margin-right: 20px;
    background-color: #fff;
  }
  .colL {
    height: calc(100vh - 100px);
    width: 440px;
    border-radius: 12px;
    overflow: hidden;
    background-color: #fff;
    margin: 20px 0;
    .section {
      clear: both;
      overflow: hidden;
      padding: 0 20px 10px;
      .title-bar {
        height: 44px;
        display: flex;
        align-items: center;
        .title {
          font-weight: bold;
        }
        .btn {
          margin-left: auto;
          cursor: pointer;
        }
      }
    }
    .btn-panel {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      padding: 10px 20px 24px;
    }
  }
  .colR {
    flex: 1;
    width: 1%;
    background-color: #fff;
    border-radius: 12px;
    margin: 20px;
    height: calc(100vh - 100px);
    .conText {
      padding: 20px;
      clear: both;
      overflow: hidden;
      .title {
        font-size: 32px;
        font-weight: bold;
        color: red;
        line-height: 1.6;
        display: flex;
        align-items: center;
      }
      .text {
        line-height: 2;
        font-size: 18px;
        padding-top: 20px;
      }
    }
  }
}
</style>
